<!--
  * new page
  * @author: liuxin
  * @since: 2024-08-25
  * index.vue
 -->
<template>
    <breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
    <div class="table-wrapped">
        <div class="table-top">
            <div class="table-header">
                <div></div>
                <div class="upload-wrapped">
                    <el-upload v-model:file-list="fileList" class="upload-demo"
                        action="http://127.0.0.1:3007/file/uploadFile" multiple :limit="3" :on-exceed="handleExceed"
                        :on-success="handleSuccess" :show-file-list="false">
                        <el-button type="primary">上传文件</el-button>
                    </el-upload>
                </div>
            </div>
            <div class="table-content">
                <el-table :data="tableData" style="width: 100%;" border stripe>
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="file_name" label="文件名"></el-table-column>
                    <el-table-column prop="file_size" label="文件大小">
                        <template #default="{ row }">
                            <div>{{ row.file_size?.slice(0, 3) }}KB</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="upload_person" label="上传者"></el-table-column>
                    <el-table-column prop="download_number" label="下载次数"></el-table-column>
                    <el-table-column prop="upload_time" label="上传时间" width="120">
                        <template #default="{ row }">
                            <div>{{ row.upload_time?.slice(0, 10) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" fixed="right">
                        <template #default="{ row }">
                            <div>
                                <el-button type="success">
                                    <template #default>
                                        <a :href="row.file_url"
                                            @click="changeClick(row.download_number, row.id)">下载文件</a>
                                    </template>
                                </el-button>
                                <el-button type="danger" @click="deleteFile(row)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="table-footer">
            <el-pagination :page-size="1" :current-page="paginationData.filecurrentPage" :pager-count="7"
                :page-count="paginationData.filepageCount" :total="paginationData.fileTotal"
                @current-change="fileCurrentChange" layout="prev, pager, next" />
        </div>
    </div>
    <tips ref="tip" @success="getfileFirstPageList"></tips>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeUnmount } from "vue"
import breadCrumb from '@/components/bread_crumb.vue'
import { ElMessage } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { bindFileAndUser, fileListLength, returnFilesListData, updateDownload } from '@/api/file'
import { bus } from "@/utils/mitt.js"
import tips from "./components/tips.vue"



//面包屑
const breadcrumb = ref()
//面包屑参数
const item = ref({
    first: '文件管理',
    second: '',
})

const fileList = ref<UploadUserFile[]>([])
// 文件上传数量限制回调
const handleExceed: UploadProps['onExceed'] = () => {
    ElMessage.warning(
        '最多上传三个文件'
    )
}
// 文件上传成功回调
const handleSuccess = (response: any) => {
    if (response.status == 0) {
        (async () => {
            await bindFileAndUser(localStorage.getItem('name'), response.url)
        })()
        ElMessage({
            message: '上传文件成功',
            type: 'success'
        })
        getfileFirstPageList()
    } else {
        ElMessage.error('上传文件失败，请检查网络问题！')
    }
    // getfileFirstPageList()
}

// 文件表格数据
const tableData = ref([])


//  分页数据
const paginationData = reactive({
    // 文件名总数
    fileTotal: 1,
    // 文件名列表总页数
    filepageCount: 1,
    // 文件名列表当前所处页数
    filecurrentPage: 1,

})
// 获取文件列表的页数
const getfileLengthFn = async () => {
    const res = await fileListLength()
    paginationData.fileTotal = res.length
    paginationData.filepageCount = Math.ceil(res.length / 10)
}
getfileLengthFn()
// 默认获取文件列表第一页的数据
const getfileFirstPageList = async () => {
    tableData.value = await returnFilesListData(1)
}
getfileFirstPageList()

// 文件列表监听换页
const fileCurrentChange = async (value: number) => {
    paginationData.filecurrentPage = value
    tableData.value = await returnFilesListData(paginationData.filecurrentPage)
}
// 更新下载量
const changeClick = async (download_number: number, id: number) => {
    await updateDownload(download_number, id)
}

const tip = ref()
const deleteFile = (row: any) => {
    bus.emit('deleteFile', row)
    tip.value.open()
}
/* // 取消订阅/监听
onBeforeUnmount(() => {
    bus.all.clear()
}) */
</script>

<style scoped lang="scss">
:deep(.el-table .cell) {
    font-weight: 400;
}

a {
    color: #fff;
    display: block;
    text-decoration: none;
}
</style>